<div class="parent" *ngIf="showWaitSpinner" style="pointer-events: none;background: rgba(0, 0, 0, 0.3) !important;">
  <div class="child" align="center">
    <mat-card-content>
      <h3>{{waitinfo}}</h3>
      <mat-spinner></mat-spinner>
    </mat-card-content>
  </div>
</div>
<div class="container">
  <mat-toolbar class="home-toolbar">
    <div mat-card-avatar class="logo-image"></div>
    <button mat-icon-button (click)="drawer.toggle()">
      <mat-icon>menu</mat-icon>
    </button>
    <h1 class="home-app-name">中国人民银行内审工作依据电子手册</h1>
    <span class="home-spacer"></span>
    用户名：{{backend.username}}
    <button mat-icon-button matTooltip="{{showPdfCom?'关闭文档':'显示文档'}}" (click)="showPdfCom = !showPdfCom" *ngIf="pdfSrc">
      <mat-icon>photo</mat-icon>
    </button>
    <button mat-icon-button matTooltip="{{showExtinfoCom?'关闭文件扩展信息':'显示文件扩展新'}}"
      (click)="showFindfileCom=false;showExtinfoCom = !showExtinfoCom;extinfo.getExtinfo()" *ngIf="currFileKey">
      <mat-icon>assignment</mat-icon>
    </button>
    <button mat-icon-button matTooltip="搜索文件" (click)="searchButtonClick()">
      <mat-icon>search</mat-icon>
    </button>
    <button mat-icon-button matTooltip="PDF文件阅读工具" (click)="drawerRight.toggle()" *ngIf="showpdftools">
      <mat-icon>map</mat-icon>
    </button>
    <button mat-icon-button matTooltip="退出" (click)="router.navigate(['login'])">
      <mat-icon>directions_run</mat-icon>
    </button>
  </mat-toolbar>
  <mat-drawer-container class="home-container" autosize>
    <mat-drawer opened #drawer (resized)="onResized($event)" class="mat-drawer-left home-sidenav" mode="side">
      <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
        <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding (click)="clickNode(node)"
          [ngClass]="{'drop-above': dragNodeExpandOverArea === 'above' && dragNodeExpandOverNode === node,
                              'drop-below': dragNodeExpandOverArea === 'below' && dragNodeExpandOverNode === node,
                              'drop-center': dragNodeExpandOverArea === 'center' && dragNodeExpandOverNode === node,'background-highlight': activeNode === node}" draggable="true"
          (dragstart)="handleDragStart($event, node);" (dragover)="handleDragOver($event, node);"
          (drop)="handleDrop($event, node);" (dragend)="handleDragEnd($event);">
          <button mat-icon-button disabled></button>
          <span>{{ node.name }}</span>
        </mat-tree-node>
        <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding (click)="clickNode(node)"
          [ngClass]="{'drop-above': dragNodeExpandOverArea === 'above' && dragNodeExpandOverNode === node,
                              'drop-below': dragNodeExpandOverArea === 'below' && dragNodeExpandOverNode === node,
                              'drop-center': dragNodeExpandOverArea === 'center' && dragNodeExpandOverNode === node,'background-highlight': activeNode === node}"
          draggable="false" (dragstart)="handleDragStart($event, node);" (dragover)="handleDragOver($event, node);"
          (drop)="handleDrop($event, node);" (dragend)="handleDragEnd($event);">
          <button mat-icon-button [attr.aria-label]="'toggle ' + node.name" matTreeNodeToggle>
            <mat-icon class="mat-icon-rtl-mirror">
              {{
                treeControl.isExpanded(node) ? "expand_more" : "chevron_right"
              }}
            </mat-icon>
          </button>
          <span style="font-weight: bold;">{{ node.name }}</span>
          <!-- <mat-progress-bar *ngIf="node.isLoading" mode="indeterminate" class="home-tree-progress-bar">
                </mat-progress-bar> -->
          <mat-spinner *ngIf="node.isLoading" mode="indeterminate" [diameter]="18" class="home-tree-progress-bar">
          </mat-spinner>
        </mat-tree-node>
      </mat-tree>
      <span #emptyItem></span>

      <mat-expansion-panel class="mat-elevation-z0">
        <mat-expansion-panel-header>
          <mat-panel-title>
            <span class="home-spacer"></span>
            <button mat-icon-button matTooltip="增加新文件" (click)="addFile($event)" *ngIf="activeNode&&(backend.username=='admin'||(activeNode&&(activeNode.name+activeNode.parent).indexOf('我的文件夹'))>-1)">
              <mat-icon>playlist_add</mat-icon>
            </button>
            <button mat-icon-button matTooltip="导入数据包" (click)="importData()">
              <mat-icon>add_to_photos</mat-icon>
            </button>
            <!-- <mat-icon (click)="addFile($event)"
              *ngIf="activeNode&&(backend.username=='admin'||(activeNode&&(activeNode.name+activeNode.parent).indexOf('我的文件夹'))>-1)">
              playlist_add</mat-icon> -->
              <!-- <button mat-button (click)="importData()">导入数据包</button> -->
          </mat-panel-title>
          
        </mat-expansion-panel-header>
        <mat-form-field class="home-form-field">
          <mat-label>新建文件夹</mat-label>
          <input matInput type="text" [(ngModel)]="newnodename" />
          <button mat-button *ngIf="newnodename" matSuffix mat-icon-button aria-label="Clear"
            (click)="newnodename = ''">
            <mat-icon>close</mat-icon>
          </button>
          <button mat-button *ngIf="newnodename" matSuffix mat-icon-button aria-label="Clear"
            (click)="addNode(newnodename)">确定</button>
        </mat-form-field>

        <div class="example-row">
          <br><br><br>
        </div>
        <div class="example-row" *ngIf="activeNode">
          <div class="example-label"><b>当前选中{{activeNode.expandable?'文件夹':'文件'}}：</b>{{activeNode.name}}</div>
        </div>
        <div class="example-row">
          <br>
        </div>
        <section *ngIf="activeNode">
          <div class="example-row" style="text-align:right;">
            <div class="example-button-cell">
              <button mat-stroked-button (click)="exportButtonClick()">导出</button>
            </div>
            <section *ngIf="backend.username=='admin'||(activeNode.name+activeNode.parent).indexOf('我的文件夹')>-1">
              <div class="example-button-cell" *ngIf="activeNode.expandable">
                <button mat-stroked-button (click)="showRenameNode()">重命名</button>
              </div>
              <div class="example-button-cell">
                <button mat-stroked-button color="warn" (click)="showConfirmDelNode()">删除</button>
              </div>
            </section>
          </div>
        </section>
        <div>
          <!-- <div class="example-button-cell home-spacer">&#160;&#160;&#160;&#160;&#160;
          </div> -->
          <!-- <div class="example-button-cell" style="float: right;" >
            <button mat-button (click)="importData()">导入数据包</button>
          </div> -->
        </div>
        <section *ngIf="showExport">
          <div class="example-row">
            <br><br><br>
          </div>
          <div class="example-row" style="text-align:right;">
            <div class="example-button-cell">
              <button mat-button (click)="exportFiles()">点击此处导出文件包，还原成原始文件格式，点击后选择存放目录</button>
            </div>

          </div>
          <div class="example-row" style="text-align:right;">

            <div class="example-button-cell">
              <button mat-button (click)="exportData()">点击此处导出数据包，发布给别人导入使用</button>
            </div>
          </div>
        </section>
        <section *ngIf="showConfirmRename">
          <mat-form-field class="home-form-field">
            <mat-label>新文件夹名称</mat-label>
            <input matInput type="text" [(ngModel)]="renamevalue" />
            <button mat-button *ngIf="renamevalue" matSuffix mat-icon-button aria-label="Clear"
              (click)="renamevalue = ''">
              <mat-icon>close</mat-icon>
            </button>
            <button mat-button *ngIf="renamevalue" matSuffix mat-icon-button aria-label="Clear"
              (click)="renameNode(renamevalue)">确定</button>
          </mat-form-field>
        </section>
        <section *ngIf="showConfirmDelete">
          <div class="example-row">
            <div class="example-label" style="color:red">{{delConfirmInfo}}</div>
          </div>
          <div class="example-row" style="text-align:right;">
            <div class="example-button-cell">
              <button mat-stroked-button (click)="showConfirmDelete=false">取消</button>
            </div>
            <div class="example-button-cell">
              <button mat-stroked-button color="warn" (click)="delNode()">确认删除</button>
            </div>
          </div>
        </section>
      </mat-expansion-panel>
    </mat-drawer>
    <mat-drawer-content class="home-sidenav-content">
      <app-findfile [hidden]="!showFindfileCom" (clickFindedfile)="clickFindedfile($event)"
        (clickSearchfile)="clickSearchfile($event)"></app-findfile>
      <app-extinfo #extinfo [fileKey]="currFileKey" [hidden]="!showExtinfoCom"></app-extinfo>
      <span [hidden]="!showPdfCom">
        <!-- <app-showpdf #pdfCom class="viewer" [pdfSrc]="pdfSrc" [fileKey]="currFileKey" [navTitle]="navTitle"
          (loadPdfComplete)="loadPdfComplete($event)" (pdfSearchComplete)="showWaitSpinner=false"
          [originalSize]="originalSize" [(page)]="page" [rotation]="rotation" [original-size]="originalSize"
          [fit-to-page]="fitToPage" [zoom]="zoom" [show-all]="showAll"
          [stick-to-page]="stickToPage" [render-text]="renderText" [external-link-target]="'blank'"
          [autoresize]="autoresize"></app-showpdf> -->
        <pdf-viewer [src]="pdfSrc" [(page)]="page" [rotation]="rotation" [original-size]="originalSize"
          [fit-to-page]="fitToPage" (after-load-complete)="afterLoadComplete($event)" [zoom]="zoom" [show-all]="showAll"
          [stick-to-page]="stickToPage" [render-text]="renderText" [external-link-target]="'blank'"
          [autoresize]="autoresize" (error)="onErrorPdf($event)" (on-progress)="onProgress($event)"
          (page-rendered)="pageRendered($event)">
        </pdf-viewer>
      </span>
      <!-- <span>
        <app-about></app-about>
      </span> -->
    </mat-drawer-content>

    <mat-drawer #drawerRight class="pdf-sidenav" mode="side" position="end">
      <div *ngIf="errorPdf" class="error mb">
        {{ errorPdf.message | json }}
      </div>

      <div class="mb">
        <mat-slide-toggle [(ngModel)]="originalSize">
          原始大小
        </mat-slide-toggle>
      </div>

      <div class="mb" [hidden]="!originalSize">
        <mat-slide-toggle [(ngModel)]="fitToPage">
          自适应页面
        </mat-slide-toggle>
      </div>

      <div class="mb">
        <mat-slide-toggle [(ngModel)]="renderText">
          渲染出文字
        </mat-slide-toggle>
      </div>

      <div class="mb">
        <mat-slide-toggle [(ngModel)]="autoresize">
          自动调整大小
        </mat-slide-toggle>
      </div>

      <div class="mb">
        <mat-slide-toggle [(ngModel)]="showAll">
          显示所有页面
        </mat-slide-toggle>
      </div>

      <div class="mb">
        <button (click)="incrementZoom(-0.1)" mat-button type="button">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="11" cy="11" r="8"></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
            <line x1="8" y1="11" x2="14" y2="11"></line>
          </svg>
        </button>

        <mat-form-field class="page-number">
          <input matInput type="number" placeholder="Zoom" [(ngModel)]="zoom" pattern="-?[0-9]*(\.[0-9]+)?">
          <mat-error>Input is not a number!</mat-error>
        </mat-form-field>

        <button (click)="incrementZoom(0.1)" mat-button type="button">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="11" cy="11" r="8"></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
            <line x1="11" y1="8" x2="11" y2="14"></line>
            <line x1="8" y1="11" x2="14" y2="11"></line>
          </svg>
        </button>
      </div>


      <div *ngIf="showAll" class="mb">
        <mat-slide-toggle [(ngModel)]="stickToPage">
          跳转到指定页
        </mat-slide-toggle>
      </div>

      <div *ngIf="stickToPage && showAll || !showAll" class="mb">
        <button (click)="incrementPage(-1)" mat-button type="button">
          上一页
        </button>

        <mat-form-field class="page-number">
          <input matInput type="number" placeholder="Page" [(ngModel)]="page" pattern="-?[0-9]*(\.[0-9]+)?">
          <mat-error>Input is not a number!</mat-error>
        </mat-form-field>

        <span *ngIf="pdf">of {{ pdf.numPages }}</span>
        <button (click)="incrementPage(1)" mat-button type="button">
          下一页
        </button>
      </div>

      <div class="mb">
        <button (click)="rotate(-90)" mat-button type="button" matTooltip="Rotate left" [matTooltipPosition]="'above'">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            transform="scale(-1,1)">
            <polyline points="23 4 23 10 17 10"></polyline>
            <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
          </svg>
        </button>

        <mat-form-field class="page-number">
          <input matInput type="number" placeholder="Rotation" [ngModel]="rotation" disabled>
          <mat-error>Input is not a number!</mat-error>
        </mat-form-field>

        <button (click)="rotate(90)" mat-button type="button" matTooltip="Rotate right" [matTooltipPosition]="'above'">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="23 4 23 10 17 10"></polyline>
            <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
          </svg>
        </button>
      </div>

      <div *ngIf="showAll" class="mb">
        <mat-slide-toggle [(ngModel)]="isOutlineShown">
          显示大纲
        </mat-slide-toggle>
      </div>

      <div *ngIf="showAll && isOutlineShown">
        <ul *ngFor="let item of outline" class="outline-list">
          <li>
            <a (click)="navigateTo(item.dest)">
              {{ item.title }}
            </a>

            <ul *ngFor="let child of item.items">
              <li>
                <a (click)="navigateTo(child.dest)">
                  {{ child.title }}
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>

      <div class="mb">
        <mat-form-field>
          <input #queryInp matInput id="pdfQueryInput" type="text" placeholder="查找..." [value]="pdfQuery"
            (keyup.enter)="searchQueryChanged(queryInp.value)">
          <mat-hint>全部文件内容搜索</mat-hint>
        </mat-form-field>
      </div>

      <div *ngIf="!isLoaded && !errorPdf && progressData" id="progress">
        <div class="bg">
          <div class="bar" [style.width]="progressData.loaded / progressData.total * 100 + '%'"></div>
        </div>
        <span>{{ getInt(progressData.loaded / progressData.total * 100) }}%</span>
      </div>

      <span>
        <app-about></app-about>
      </span>
    </mat-drawer>
  </mat-drawer-container>
</div>